<!DOCTYPE html>
<html>
<head>

<title>Detectar Notas</title>
<style>
.botao01{
     background: -webkit-linear-gradient(bottom, #E0E0E0, #F9F9F9 70%);
     background: -moz-linear-gradient(bottom, #E0E0E0, #F9F9F9 70%);
     background: -o-linear-gradient(bottom, #E0E0E0, #F9F9F9 70%);
     background: -ms-linear-gradient(bottom, #E0E0E0, #F9F9F9 70%);
     background: linear-gradient(bottom, #E0E0E0, #F9F9F9 70%);
     border: 1px solid #CCCCCE;
     border-radius: 3px;
     box-shadow: 0 3px 0 rgba(0, 0, 0, .3),
                   0 2px 7px rgba(0, 0, 0, 0.2);
     color: #616165;
     display: block;
     font-family: "Trebuchet MS";
     font-size: 14px;
     font-weight: bold;
     line-height: 25px;
     text-align: center;
     text-decoration: none;
     text-transform: uppercase;
     text-shadow:1px 1px 0 #FFF;
     padding: 5px 15px;
     position: relative;
     width: 8px;
}
 
.botao01:before{
     border: 1px solid #FFF;
     border-radius: 3px;
     box-shadow: inset 0 -2px 12px -4px rgba(70, 70, 70, .2),
                   inset 0 3px 2px -1px rgba(255, 255, 255, 1);
     content: "";
     bottom: 0;
     left: 0;
     right: 0;
     top: 0;
     padding: 5px;
     position: absolute;
    }
 
    .botao01:after{
     background: rgba(255, 255, 255, .4);
     border-radius: 2px;
     content: "";
     bottom: 15px;
     left: 0px;
     right: 0px;
     top: 0px;
     position: absolute;
    }
	
	.som{
		display: none;
	}

Read more: http://www.linhadecodigo.com.br/artigo/3600/botao-com-css-3-como-criar-um-botao-sem-imagens.aspx#ixzz31AHE48tR
</style>

<script>
	var vezes = 0;
	var notas = ["C","E","G","B","F","D","A"];
	var daVez;
	var pontos = 0;
	var nivel = 1;
	var erros = 3;
	var usoEscala = 3;
	var numNotas = 3;
	var anterior = 10;
	document.onkeydown = chama;
	var teclas = [49,50,51,52,53,54,55,65,83];
	
	function inicializa(){
		for(var i=4;i <= numNotas ;i++){
			document.getElementById(i).removeChild(document.getElementById("botao"+i));
		}
		pontos = 0;
		nivel = 1;
		erros = 3;
		usoEscala = 3;
		numNotas = 3;
		document.getElementById("erros").innerHTML = "Erros: " + erros;
		document.getElementById("pontos").innerHTML = "Pontos: " + pontos;
		document.getElementById("nivel").innerHTML = "Nivel: " + nivel;
	}
	
	function chama(){

		var intKeyCode = window.event.keyCode;
		switch(intKeyCode){
			case teclas[0]://1
				jogar(1);
			break;
			case teclas[1]://2
				jogar(6);
			break;
			case teclas[2]://3
				jogar(2);
			break;
			case teclas[3]://4
				jogar(5);
			break;
			case teclas[4]://5
				jogar(3);
			break;
			case teclas[5]://6
				jogar(7);
			break;
			case teclas[6]://7
				jogar(4);
			break;
			case teclas[7]://A Repete a nota
				document.getElementById("audio").play();
			break;
			case teclas[8]://S Repete a escala
				document.getElementById("escala").play();
			break;
		}
			
	
	}
	
	function nota(){
		var numero = getRandomInt(0,numNotas);
		if(numero < numNotas && numero != anterior){
			var audio = document.getElementById("audio"); 
			var nota = document.createElement("source");
			nota.setAttribute("src",notas[numero] + ".mp3");
			nota.setAttribute("type","audio/mpeg");
			nota.setAttribute("id","novo");
			audio.removeChild(document.getElementById("novo"));
			audio.appendChild(nota);
			daVez = parseInt(numero);
			sleep(1000);
			limpar();
			audio.play();
			anterior = numero;
			
		}
		else{
			gambi();
		}
				
	}
	
	function getRandomInt(lower, upper)
	{
		//to create an even sample distribution
		return Math.floor(lower + (Math.random() * (upper - lower + 1)));

		//to produce an uneven sample distribution
		//return Math.round(lower + (Math.random() * (upper - lower)));

		//to exclude the max value from the possible values
		//return Math.floor(lower + (Math.random() * (upper - lower)));
	}
	
	function gambi(){
		nota();
	}
	
	function jogar(num){
		document.getElementById("erros").innerHTML = "Erros: " + erros;
		document.getElementById("pontos").innerHTML = "Pontos: " + pontos;
		document.getElementById("botao"+(daVez+1)).style.color = "#66ff00";
		if((parseInt(num)-1) == parseInt(daVez)){
			pontuar();
			document.getElementById("botao"+(daVez+1)).style.color = "#66ff00";
		}
		else{
			document.getElementById("botao"+(parseInt(num))).style.color = "#e03c31";	
			erros--;
			document.getElementById("somErro").play();
			alert("Nota Certa: " + notas[parseInt(daVez)]);
			if(erros == 0){
				alert("Pontos: " + pontos);
				vezes++;
				inicializa();
			}
		}
		nota();
		document.getElementById("erros").innerHTML = "Erros: " + erros;
	}
	
	function limpar(){
		for(var i=1;i <= numNotas;i++){
			document.getElementById("botao"+i).style.color = "#616165";
		}
	}
	
	function pontuar(){

		var valor;
		switch(parseInt(nivel)){
			case 1:
				pontos += 10;
				break;
			case 2: 
				pontos += 15;
				break;
			case 3:
				pontos += 20;
				break;
			case 4:
				pontos += 25;
				break;
			case 5:
				pontos += 30;
				break;
		}
		
		
		
		document.getElementById("pontos").innerHTML = "Pontos: " + pontos;
		
		if(parseInt(pontos) == 100) {nivel = 2; numNotas = 4; criaBotao(numNotas); }
		if(parseInt(pontos) == 250){numNotas = 5;nivel = 3;	criaBotao(numNotas);}
		if(parseInt(pontos) == 450){numNotas = 6;nivel = 4;	criaBotao(numNotas);}
		if(parseInt(pontos) == 700 ){numNotas = 7;nivel = 5; criaBotao(numNotas);}

		document.getElementById("nivel").innerHTML = "Nivel: " + nivel;
		
	}
	
	function criaBotao(id){
		var botao = document.createElement("a");
		botao.setAttribute("onclick","jogar("+id+")");
		botao.setAttribute("class","botao01");
		botao.setAttribute("id","botao"+id);
		botao.innerHTML = notas[id - 1];
		document.getElementById(id).appendChild(botao);
		
	}
	
	function sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds){
      break;
    }
	}
  }

</script>

</head>
<body onload = "nota()" >

<div class = "som">
<audio controls id = "somErro" >
<source src="erro.mp3" />
</audio>
<audio controls id = "escala" >
<source src="escala.mp3" />
</audio>
<audio controls id = "audio" >
<source id = "novo" />
</audio></div>
<table>
<tr>
<td id = "1" ><a class="botao01" id="botao1" onclick="jogar(1);">C</a></td>
<td id = "6" ></td>
<td id = "2" ><a class="botao01" id="botao2" onclick="jogar(2);" >E</a></td>
<td id = "5" ></td>
<td id = "3" ><a class="botao01" id="botao3" onclick="jogar(3);" >G</a></td>
<td id = "7" ></td>
<td id = "4" ></div>
<td id = "8" ></div>
</tr>
<br>
<div id = "nivel"></div><div id = "pontos" ></div><div id = "erros"> </div>

</body>
</html>